import React, { FC } from "react";
import BubbleChart from "@/components/BubbleChart";
import { initialBubbleState } from "@/constant";
import type { ChartPropsType, BubbleStateOptionType } from "@/types/echartInterface";
import useGetBubbleData from "@/hooks/useGetBubbleData";
import { Spin } from "antd";
const BubbleView: FC<ChartPropsType> = (props: ChartPropsType) => {
  const { times } = props;
  const {
    data = initialBubbleState,
    loading
  } = useGetBubbleData(times);
  const bubbleStyle = {
    width: "100%",
    height: "320px",
  };


  return (
    <div style={{ marginTop: "10px" }}>
      {loading && (
        <div style={{ textAlign: "center",marginTop: "50px" , ...bubbleStyle }}>
          <Spin />
        </div>
      )}
      {!loading && (
        <BubbleChart
          bubbleOption={data as BubbleStateOptionType}
          bubbleStyle={bubbleStyle}
        />
      )}
    </div>
  );
};

export default BubbleView;
